<template>
  <el-row>
    <el-col :span="12">
      <div class="row-input">
        <!-- ========================================== -->
        <!-- ========================================== -->
        <el-row class="box-row">
          <el-col :span="12">
            <span>职位标题:</span>
            <div class="input">
              <el-input v-model="jobdata.title" placeholder="请输入职位标题"></el-input>
            </div>
          </el-col>
          <el-col :span="12">
            <span>排序(越大越靠前):</span>
            <div class="input">
              <el-input v-model="jobdata.sort" placeholder="请输入排序值" type='number'></el-input>
            </div>
          </el-col>
        </el-row>
        <!-- ========================================== -->
        <!-- ========================================== -->
        <el-row class="box-row">
          <el-col :span="12">
            <span>工作时间:</span>
            <div class="input">
              <el-input v-model="jobdata.jobTime" placeholder="请输入工作时间"></el-input>
            </div>
          </el-col>
          <el-col :span="12">
            <span>工作地点:</span>
            <div class="input">
              <el-input v-model="jobdata.jobAddress" placeholder="请输入工作时间"></el-input>
            </div>
          </el-col>
        </el-row>
        <!-- ========================================== -->
        <!-- ========================================== -->
        <el-row class="box-row">
          <el-col :span="12">
            <span>价格:</span>
            <div class="input">
              <el-input v-model="jobdata.price" placeholder="请输入价格"></el-input>
            </div>
          </el-col>
          <el-col :span="7">
            <span>价格单位:</span>
            <div class="input">
              <el-select v-model="jobdata.unit" placeholder="请选择">
                <el-option v-for="item in unitoption" :key="item.value" :label="item.label" :value="item.value">
                </el-option>
              </el-select>
            </div>
          </el-col>
          <el-col :span="5">
            <span>结算方式:</span>
            <div class="input">
              <el-select v-model="jobdata.settlement" placeholder="请选择">
                <el-option v-for="item in settlementoption" :key="item.value" :label="item.label" :value="item.value">
                </el-option>
              </el-select>
            </div>
          </el-col>
        </el-row>
        <!-- ========================================== -->
        <!-- ========================================== -->
        <el-row class="box-row">
          <el-col :span="12">
            <span>岗位人数:</span>
            <div class="input">
              <el-input v-model="jobdata.jobNum" placeholder="请输入岗位人数" type='number'></el-input>
            </div>
          </el-col>
          <el-col :span="7">
            <span>企业:</span>
            <div class="input">
              <el-select v-model="jobdata.company" placeholder="请选择">
                <el-option v-for="(item,index) in companyoption" :key="index" :label="item.companyName" :value="index">
                </el-option>
              </el-select>
            </div>
          </el-col>
          <el-col :span="5">
            <span>虚假职位:</span>
            <div class="input">
              <el-select v-model="jobdata.fake" placeholder="请选择">
                <el-option v-for="item in fakeoption" :key="item.label" :label="item.label" :value="item.value">
                </el-option>
              </el-select>
            </div>
          </el-col>
        </el-row>
        <!-- ========================================== -->
        <!-- ========================================== -->
        <el-row class="box-row">
          <el-col :span="24">
            <p>展示类别(app内的展示,可以选):</p><br>
            <el-checkbox :indeterminate="isIndeterminate" v-model="checkAll" @change="handleCheckAllChange">全选</el-checkbox>
            <div style="margin: 15px 0;"></div>
            <el-checkbox-group v-model="jobdata.checkedCities" @change="handleCheckedCitiesChange">
              <el-checkbox v-for="city in cities" :label="city" :key="city">{{city}}</el-checkbox>
            </el-checkbox-group>
          </el-col>
        </el-row>
        <!-- ========================================== -->
        <!-- ========================================== -->
      </div>
    </el-col>
    <el-col :span="12">
      <QuillEdito :content="content" @change='onEditorChange' />
    </el-col>
  </el-row>
</template>

<script lang='ts'>
import { reactive, ref, SetupContext, toRefs } from "vue";
import { Get, Post } from "@/api";
import { $message } from "../element";
import QuillEdito from "@/components/job/quill-edito/QuillEdito.vue";
export default {
  name: " ",
  components: { QuillEdito },
  emits: ["getUserList", "dialog"],
  props: { rowjob: Object },
  setup(props: any, ctx: SetupContext) {
    const data = reactive({
      jobdata: {
        /* 标题 */
        title: "",
        /* 价格 */
        price: "",
        /* 价格单位 */
        unit: "元/天",
        /* 结算方式 */
        settlement: "按天结算",
        /* 职位描述 */
        jobIntr: ``,
        /* 排序 */
        sort: 5,
        /* 岗位人数 */
        jobNum: "999",
        /* 虚假职位 */
        fake: 1,
        /* 企业id */
        companyData: {},
        /* 工作时间 */
        jobTime: "任意时间",
        /* 工作地点 */
        jobAddress: "任意地点",
        /* 展示类别 */
        checkedCities: ["首页"],
        company: "",
      } as any,
      jobValue: {
        title: "职位标题",
        price: "价格",
        unit: "价格单位",
        settlement: "结算方式",
        jobIntr: "职位描述",
        sort: "排序",
        jobNum: "岗位人数",
        jobTime: "工作时间",
        jobAddress: "工作地点",
        checkedCities: "展示类别",
      } as any,
    });
    const content = ref(``);
    data.jobdata = props.rowjob;
    content.value = props.rowjob.jobIntr;

    
    const options = reactive({
      unitoption: [
        {
          value: "元/月",
          label: "元/月",
        },
        {
          value: "元/天",
          label: "元/天",
        },
        {
          value: "元/时",
          label: "元/时",
        },
      ],
      settlementoption: [
        {
          value: "按月结算",
          label: "按月结算",
        },
        {
          value: "按天结算",
          label: "按天结算",
        },
        {
          value: "按时结算",
          label: "按时结算",
        },
        {
          value: "不限",
          label: "不限",
        },
      ],
      fakeoption: [
        {
          value: 1,
          label: "是",
        },
        {
          value: 0,
          label: "否",
        },
      ],
      companyoption: [],
    });

    const company = async () => {
      try {
        const companyResult = await Get({
          url: "getCompany",
          data: {
            pageNo: 1,
            pageSize: 999,
          },
        });
        options.companyoption = companyResult.data.data;
      } catch (error) {
        console.log(error);
        if (error.data) {
          $message("error", error.data.message);
        }
      }
    };
    company();

    const cityOptions = [
      "首页",
      "热门招聘",
      "简单易做",
      "轻松职位",
      "名企直聘",
    ];
    const checkbox = reactive({
      checkAll: false,
      cities: cityOptions,
      isIndeterminate: true,
    });

    const handleCheckAllChange = (val: any) => {
      data.jobdata.checkedCities = val ? cityOptions : [];
      checkbox.isIndeterminate = false;
    };
    const handleCheckedCitiesChange = (value: string | any[]) => {
      let checkedCount = value.length;
      checkbox.checkAll = checkedCount === checkbox.cities.length;
      checkbox.isIndeterminate =
        checkedCount > 0 && checkedCount < checkbox.cities.length;
    };

    const onEditorChange = ({ html, text, quill }: any) => {
      data.jobdata.jobIntr = html;
    };

    const onclickyes = async () => {
      for (let key in data.jobdata) {
        if (data.jobdata[key] == "") {
          if (data.jobValue[key]) {
            $message("error", data.jobValue[key] + " 不能为空!!!");
            return;
          }
        }
      }
      if (data.jobdata["checkedCities"].length < 1) {
        $message("error", data.jobValue["checkedCities"] + " 不能为空!!!");
        return;
      }
      if (data.jobdata["jobIntr"].length < 20) {
        $message("error", data.jobValue["jobIntr"] + "字数太少");
        return;
      }
      data.jobdata.companyData = options.companyoption[data.jobdata.company];
      try {
        const addjobResult = await Post({
          url: "updateJob",
          data: data.jobdata,
        });
        ctx.emit("getUserList");
        ctx.emit("dialog");
        $message("success", addjobResult.data.message);
      } catch (error) {
        console.log(error);
        if (error.data) {
          $message("error", error.data.message);
        }
      }
    };

    return {
      ...toRefs(data),
      ...toRefs(options),
      ...toRefs(checkbox),
      content,
      onclickyes,
      onEditorChange,
      handleCheckAllChange,
      handleCheckedCitiesChange,
    };
  },
};
</script>
<style lang="less" scoped>
.row-input {
  span {
    margin: 8px 0;
    display: inline-block;
  }
  .box-row {
    margin-bottom: 15px;
  }
}
.input {
  width: 90%;
}
</style>